<template>
  <div >
    <div v-for="item of list" :key="item.id" v-if="item.state === tag">
      <div @click="goTaskDetail(item.id, item.name)" class="row" >
         <span class="taskName">
            <svg class="icon taskIcon" aria-hidden="true">
              <use xlink:href="#iconmokuai1"></use>
            </svg>
            {{item.name}}
          </span>
        <span class="delIcon">
            <svg class="icon fuzerenIcon" aria-hidden="true">
              <use xlink:href="#iconren"></use>
            </svg>
            {{item.leaderName}}
          </span>
      </div>
        <el-divider></el-divider>
    </div>
  </div>
</template>

<script>
import axios from 'axios/index'
export default {
  name: 'list',
  data () {
    return {
      list: [],
      tag: this.Run
    }
  },
  methods: {
    goTaskDetail (taskID, taskName) {
      sessionStorage.setItem('taskID', taskID)
      sessionStorage.setItem('taskName', taskName)
      sessionStorage.setItem('activeMenu', '2')
      this.$router.push('/checkTaskDetail')
    },
    getTaskList () {
      axios.get(this.url + '/module/leader/' + localStorage.getItem('id'))
        .then(this.getTaskListSucc)
    },
    getTaskListSucc (res) {
      if (res.status === 200) {
        res = res.data
        this.list = res
      }
    }
  },
  mounted () {
    this.getTaskList()
  }
}
</script>

<style lang="stylus" scoped>
  .taskName
    margin-left .3rem
  .right
    float: right
  .iconMargin
    margin-right .3rem
  .textColor
    color #0D0D0D
  .iconColor
    color #88d4ff
  .taskIcon
    color #16b0ff
    margin-right .35rem
  .row
    margin-top .6rem
    margin-left .5rem
    margin-bottom .6rem
  .delIcon
    float right
    margin-right .9rem
  .fuzerenIcon
    margin-right .3rem
    color #88d4ff
</style>
